<template>
  <div class="tag">
    <slot class="content"></slot>

    <el-icon class="icon"><CloseBold /></el-icon>
  </div>
</template>

<script setup>
import { CloseBold } from '@element-plus/icons-vue'
const props = defineProps(['type'])
console.log(props)
</script>

<style lang="scss" scoped>
.tag {
  display: inline-flex;
  align-items: center;
  background-color: #ff1515;
  border-radius: 5px;
  margin: 5px 3px;
  padding: 5px 5px;
  transition: all 0.5s;

  &:hover .icon {
    // display: inline;
    width: 15px;
    transform: scale(1);
  }
}

.icon {
  transition: all 0.5s;
  display: inline-block;
  width: 0px;
  transform: scale(0);
  transform-origin: left;
}
</style>
